import { Tabs, Tab, Cards, Card } from 'nextra/components'
import { AppIcon, PagesIcon } from '@components/icons'

# Get Started

## Features

- **100% Type-safe**: Locales in TS or JSON, type-safe `t()` & `scopedT()`, type-safe params, type-safe plurals, type-safe `changeLocale()`...
- **Small**: No dependencies, lazy-loaded
- **Simple**: No Webpack configuration, no CLI, no code generation, just pure TypeScript
- **Server and Client, Static Rendering**: Lazy-load server and client-side, support for Static Rendering
- <strong style={{ display: 'inline-flex', gap: '8px', verticalAlign: 'top' }}><AppIcon /> App or <PagesIcon /> Pages Router</strong>: With support for React Server Components

Try it live on CodeSandbox:

[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/jovial-paper-skkprk?file=%2Fapp%2F%5Blocale%5D%2Fpage.tsx%3A1%2C1)

## Installation

<Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
  <Tab>
    ```bash
    pnpm install next-international
    ```
  </Tab>
  <Tab>
    ```bash
    npm install next-international
    ```
  </Tab>
  <Tab>
    ```bash
    yarn add next-international
    ```
  </Tab>
    <Tab>
    ```bash
    bun add next-international
    ```
  </Tab>
</Tabs>

## TypeScript config

Make sure that `strict` is set to `true` in your `tsconfig.json`. This will allow next-international to provide the best in-class developer experience.

## Setup

next-international supports both the App Router and Pages Router of Next.js. The APIs are very similar, but each have small specificities. Follow the one you're using:

<Cards>
  <Card icon={<AppIcon />} title="App Router" href="/docs/app-setup" />
  <Card icon={<PagesIcon />} title="Pages Router" href="/docs/pages-setup" />
</Cards>